<div id="paypal-button-container-{{pay_id}}" class="paypal-button-container" style="display: flex;"></div>
<script>
  $(function () {
    if(!window['paypal']){
      return;
    }
    paypal.Buttons({
      // fundingSource: paypal.FUNDING.CARD,
      // expandCardForm: true,
      style: {
        layout: 'vertical',  // horizontal | vertical
      },
      createOrder: function (data, actions) {
        var product_cart_param = "";
        var paypalecRet = moi.onEvent("paypalec_multiple_callback",{ payId: "{{pay_id | default :'0'}}", code: 0});
        var params = moi.getPageStorage('product_params' +{{pay_id}});
        if(!paypalecRet.params.code){
          moi.onEvent("paypalec_callback",{ payId: "{{pay_id | default :'0'}}"})
          var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });
          if (ret.params.code !== 200) {
            return false
          }
          var product_selected = {
                product_id: params.product_id,
                sku_code: params.sku_code,
                quantity: params.quantity,
                data_from: moi.getUrlParam("data_from") || "{{data_from}}",
                property: ret.params.property

            }
          product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
        }else{
          if(paypalecRet.params.code !== 200){
            return false
          }
          const cart_param = paypalecRet.params.data.map(el=>{
            return {
              product_id: params.product_id,
              sku_code: el.sku_code,
              quantity: el.add_quantity,
              data_from: moi.getUrlParam("data_from") || "{{data_from}}",
              property: []
            }
          })
          product_cart_param = encodeURIComponent(JSON.stringify(cart_param));
        }

        try {
          return fetch('/checkouts/ecpayment/{{payment.interface_type}}/ECPay?is_ajax=1&payment_methods=paypal&payment_id={{ payment.id }}&cart_param=' + product_cart_param + '&_ref=' + window.location.href, {
            method: 'POST'
          }).then(function (res) {
            return res.json();
          }).then(function (data) {
            if (data.status) {
              paypal_redirect_url = data.data.return_url;
              return data.data.paypal_order_id;
            }
            else {
              moi.message({ content: data.data.L_LONGMESSAGE0, type: "error" })
              return false;
            }
          });
        } catch (error) {
          moi.message({ content: "create order error", type: "error" })
          console.error(error)
        }
      },
      onApprove: function (data, actions) {
        try {
          if (paypal_redirect_url != '') {
            location.href = paypal_redirect_url; return;
          }
          return actions.redirect();
          return fetch('/my-server/capture-order/' + data.orderID, {
            method: 'POST'
          }).then(function (res) {
            if (!res.ok) {
              alert('Something went wrong');
            }
          });
        } catch (error) {
          moi.message({ content: "onApprove error", type: "error" })
          console.error(error)
        }
      }

    }).render('#paypal-button-container-{{pay_id}}');
  })
</script>